<template>
  <div>
    <common-head :title="$route.name" />
    <div class="container">
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="contact.linkMan"
            :rules="[
              {
                required: true,
                message: '必须输入姓名',
              },
            ]"
            label="姓名"
            placeholder="请输入收货人姓名"
          />
          <van-field
            v-model="contact.mobile"
            :rules="[
              {
                pattern: /\d{11}/,
                message: '请输入11位手机号',
              },
            ]"
            type="tel"
            label="手机号"
            placeholder="请输入收货人手机"
          />
          <van-field
            label="地区"
            :value="areaStr"
            @click-input="showArea = true"
            readonly
            placeholder="选择省/市/区"
          />
          <van-field
            v-model="contact.address"
            label="详细地址"
            placeholder="请输入收货人详细地址"
          />
          <van-field
            v-model="contact.code"
            maxlength="6"
            type="number"
            label="邮政编码"
            placeholder="请输入邮政编码"
          />
          <van-cell center title="是否为默认地址">
            <template #right-icon>
              <van-switch v-model="contact.isDefault" size="24" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-button size="large" native-type="submit" type="danger" round
          >确定</van-button
        >
      </van-form>
      <van-popup
        v-model="showArea"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-area
          @confirm="choseArea"
          @cancel="showArea = false"
          title="选择省市区"
          :area-list="areaList"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import CommonHead from "../../components/CommonHead.vue";
import { areaList } from "@vant/area-data";
import { addContact } from "_api";
import { getToken } from "_utils";
import { Toast } from "vant";
export default {
  data() {
    return {
      areaList,
      contact: {
        address: "",
        cityId: "",
        linkMan: "",
        mobile: "",
        provinceId: "",
        code: "",
        isDefault: false,
      },
      showArea: false,
      areaStr: "",
    };
  },
  methods: {
    onSubmit() {
      // 新增联系人了
      addContact({
        ...this.contact,
        token: getToken(),
      }).then((res) => {
        if (res.data.code === 0) {
          Toast.success({
            message: "增加联系人成功",
            duration: 2000,
            onClose: () => {
              alert("后面判断取收货人列表或者订单页");
            },
          });
        }
      });
    },
    choseArea(params) {
      // 省市区三级联动确认
      console.log(params);
      const areaStrs = [];
      params.forEach((area) => {
        areaStrs.push(area.name);
      });
      this.areaStr = areaStrs.join("/");
      this.contact.provinceId = params[0].code;
      this.contact.cityId = params[1].code;
      this.showArea = false;
    },
  },
  components: { CommonHead },
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 46px;
}
</style>
